<template>
  <div class="baiduMap">
    <div class="demo-image__placeholder">
      <div class="block">
        <span class="demonstration">百度地图</span>
        <el-image :src="src"></el-image>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" plain @click="toAbout">查看详情</el-button>
    </div>
    <baidu-map
      :center="center"
      :zoom="zoom"
      @ready="handler"
      style="height:500px;width:80%;margin:0 auto;"
    >
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-map-type>
    </baidu-map>
  </div>
</template>
<script>
export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      src:
        "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4087042252,3305680367&fm=58&s=73F6A876C8A47E90237D87C502007024"
    };
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 116.315546;
      this.center.lat = 39.955725;
      this.zoom = 15;
    },
    toAbout() {
      window.open('http://localhost:2002/about','_blank')
    }
  }
};
</script>
<style lang='scss' scoped>
.baiduMap {
  overflow: hidden;
  .block {
    margin: 30px 0;
    text-align: center;
    .demonstration {
      line-height: 50px;
    }
    .el-image {
      width: 300px;
      display: block;
      margin: 0 auto;
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }
}
</style>